import React, { useEffect, useMemo, useState } from 'react'
import { NavBar, Button, Toast, Collapse, Tag, InfiniteScroll, List } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import styles from './list.module.css'
import dayjs from 'dayjs'
import instance from '../../api/instance'

function Index() {
  let navigate = useNavigate()
  const [sp, setSp] = useSearchParams()
  const start = sp.get('start')
  const end = sp.get('end')
  const date = sp.get('date')
  const Speed = sp.get('isSpeed')
  const [isSpeed, setIsSpeed] = useState(Speed == 'false' ? false : true)
  const [isSeat, setIsSeat] = useState(false)
  const [isDesc, setIsDesc] = useState(false)
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)


  const [datelist, setDateList] = useState([])
  const rq = useMemo(() => {
    return Object.apply(sp)
  }, [sp])

  const handelBtn = (stemp) => {
    const newDate = dayjs(date).add(stemp, 'day').format('YYYY-MM-DD')
    setDateList({ ...datelist, data: newDate })
  }

  //列表
  const [tarinList, setTarinList] = useState([])
  const trainData = async () => {
    const res = await instance.post('/api/trip/train', { start, end, date, isSpeed, isSeat, isDesc, page })
    console.log('res', res)
    const { code, data } = res.data
    if (code == 200) {
      setTarinList((pre) => [...pre, ...data])
      setPage(page + 1)
    }
  }
  useEffect(() => {
    trainData()
  }, [])



  return (
    <div>
      <NavBar onBack={() => navigate('/')}>
        <span>{start}</span>
        <span>→</span>
        <span>{end}</span>
      </NavBar>
      <div className={styles.rq}>
        <Button color='primary' fill='none' size='small'
          onClick={() => handelBtn(-1)}
          disabled={Math.ceil(dayjs(date).diff(dayjs(), 'day', true)) <= 0}>
          前一天
        </Button>
        <span>{date}</span>
        <Button color='primary' fill='none' size='small'
          onClick={() => handelBtn(1)}
          disabled={Math.ceil(dayjs(date).diff(dayjs(), 'day', true)) >= 4}>
          后一天
        </Button>
      </div>
      <div className={styles.sx}>
        <Button color='default' fill='solid'>
          筛选
        </Button>
        <Button color='default' fill='solid'>
          出发时间
        </Button>
        <Button color='default' fill='solid'>
          旅游耗时
        </Button>
      </div>
      <div>
        {
          tarinList.length > 0 && tarinList.map((item, index) => {
            return <div key={index} className={styles.list} onClick={()=>navigate(`/detail/${item.id}`)}>
              <div className={styles.listItem}>
                <span>{item.start}</span>
                <span>====&gt;</span>
                <span>{item.end}</span>
                <span>{item.startTime}</span>
                <span style={{ fontSize: '16px' }}>￥{item.tick.secondTick}起</span>
              </div>
              <div className={styles.listItem}>
                <span>二等座：有票</span>
                <span>一等座：有票</span>
                <span>商务座：有票</span>
              </div>
              <div>
                <Collapse accordion arrowIcon={() => <Tag>抢</Tag>}>
                  <Collapse.Panel key='1' title='以下为普通列车'>
                    <div key={index} className={styles.list}>
                      <div className={styles.listItem}>
                        <span>{item.start}</span>
                        <span>====&gt;</span>
                        <span>{item.end}</span>
                        <span>{item.startTime}</span>
                        <span style={{ fontSize: '16px' }}>￥{item.tick.secondTick}起</span>
                      </div>
                      <div className={styles.listItem}>
                        <span>二等座：有票</span>
                        <span>一等座：有票</span>
                        <span>商务座：有票</span>
                      </div>
                    </div>
                  </Collapse.Panel>
                </Collapse>
              </div>
            </div>
          })
        }
      </div>
      <InfiniteScroll loadMore={trainData} hasMore={hasMore} />
    </div>
  )
}

export default Index
